<script setup lang="ts">
import {onMounted, reactive} from "vue";

const state = reactive({
  data: {
    furnacePressure: 3.22,
    smeltingTemperature: 1544,
    barrelTemperature: 542.3,
    // 扩散泵温度
    pumpTemperature: 89.1,
    // 冷却水温
    ratedPower: 34.22,
    // 系统负载
    systemLoad: 88,
    // 设备状态
    deviceStatus: '运行中(扩散泵温度过高)'
  }
});

onMounted(() => {
  // 初始加载数据
  generateRandomData();

// 每3秒更新一次数据
  setInterval(generateRandomData, 3000);
})

// 传感器数据范围定义
const sensorRanges = {
  pressure: {min: 2.8, max: 4.2, normalMax: 3.8, criticalMax: 4.0},
  temp: {min: 1500, max: 1650, normalMax: 1600, criticalMax: 1630},
  barrel: {min: 200, max: 280, normalMax: 260, criticalMax: 270},
  pump: {min: 50, max: 120, normalMax: 80, criticalMax: 100},
  water: {min: 25, max: 40, normalMax: 35, criticalMax: 38},
  load: {min: 60, max: 95, normalMax: 85, criticalMax: 90}
};

// 状态消息
const statusMessages = [
  "运行中 - 系统正常",
  "运行中 - 熔炼温度略高",
  "运行中 - 扩散泵温度过高",
  "运行中 - 冷却水温升高",
  "运行中 - 系统负载增加",
  "运行中 - 压力波动"
];

// 生成随机数据
function generateRandomData() {
  const now = new Date();
  document.getElementById('timestamp').textContent = `最后更新: ${now.toLocaleTimeString()}`;

  // 更新压力值
  updateSensorValue(
      'pressure',
      (Math.random() * (sensorRanges.pressure.max - sensorRanges.pressure.min) + sensorRanges.pressure.min).toFixed(2)
  );

  // 更新熔炼温度
  updateSensorValue(
      'temp',
      Math.floor(Math.random() * (sensorRanges.temp.max - sensorRanges.temp.min) + sensorRanges.temp.min)
  );

  // 更新桶温度
  updateSensorValue(
      'barrel',
      Math.floor(Math.random() * (sensorRanges.barrel.max - sensorRanges.barrel.min) + sensorRanges.barrel.min)
  );

  // 更新扩散泵温度
  updateSensorValue(
      'pump',
      Math.floor(Math.random() * (sensorRanges.pump.max - sensorRanges.pump.min) + sensorRanges.pump.min)
  );

  // 更新水温
  updateSensorValue(
      'water',
      (Math.random() * (sensorRanges.water.max - sensorRanges.water.min) + sensorRanges.water.min).toFixed(1)
  );

  // 更新系统负载
  updateSensorValue(
      'load',
      Math.floor(Math.random() * (sensorRanges.load.max - sensorRanges.load.min) + sensorRanges.load.min)
  );

  // 随机更新系统状态
  document.getElementById('system-status').textContent =
      statusMessages[Math.floor(Math.random() * statusMessages.length)];
}

// 更新传感器值和状态指示器
function updateSensorValue(sensorName, value) {
  const valueElement = document.getElementById(`${sensorName}-value`);
  const statusElement = document.getElementById(`${sensorName}-status`);

  // 添加更新动画
  valueElement.classList.add('value-update');
  setTimeout(() => {
    valueElement.classList.remove('value-update');
  }, 500);

  // 更新值
  valueElement.textContent = value;

  // 更新状态指示器
  const numericValue = parseFloat(value);
  const range = sensorRanges[sensorName];

  // 清除之前的类
  statusElement.className = 'status-indicator';

  // 设置新状态
  if (numericValue > range.criticalMax) {
    statusElement.classList.add('critical');
  } else if (numericValue > range.normalMax) {
    statusElement.classList.add('warning');
  } else {
    statusElement.classList.add('normal');
  }
}

</script>

<template>
  <div id="right3" class="dashboard">
    <div class="scanlines"></div>
    <div class="panel-title">熔炼炉监控系统 - 实时数据</div>
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    <div class="sensors-container">
      <!-- 压力传感器 -->
      <div class="sensor">
        <div class="status-indicator" id="pressure-status"></div>
        <div class="sensor-name">炉内压力</div>
        <div class="sensor-value" id="pressure-value">3.45</div>
        <div class="sensor-unit">MPa</div>
      </div>

      <!-- 温度传感器 -->
      <div class="sensor">
        <div class="status-indicator" id="temp-status"></div>
        <div class="sensor-name">熔炼温度</div>
        <div class="sensor-value" id="temp-value">1567</div>
        <div class="sensor-unit">°C</div>
      </div>

      <!-- 桶温度传感器 -->
      <div class="sensor">
        <div class="status-indicator" id="barrel-status"></div>
        <div class="sensor-name">桶温度</div>
        <div class="sensor-value" id="barrel-value">245</div>
        <div class="sensor-unit">°C</div>
      </div>

      <!-- 扩散泵温度传感器 -->
      <div class="sensor">
        <div class="status-indicator" id="pump-status"></div>
        <div class="sensor-name">扩散泵温度</div>
        <div class="sensor-value" id="pump-value">89</div>
        <div class="sensor-unit">°C</div>
      </div>

      <!-- 水温传感器 -->
      <div class="sensor">
        <div class="status-indicator" id="water-status"></div>
        <div class="sensor-name">冷却水温</div>
        <div class="sensor-value" id="water-value">32.5</div>
        <div class="sensor-unit">°C</div>
      </div>

      <!-- 系统负载 -->
      <div class="sensor">
        <div class="status-indicator" id="load-status"></div>
        <div class="sensor-name">系统负载</div>
        <div class="sensor-value" id="load-value">78</div>
        <div class="sensor-unit">%</div>
      </div>

      <!-- 状态面板 -->
      <div class="status-panel">
        <div class="status-title">设备状态</div>
        <div class="status-value" id="system-status">运行中 - 系统正常</div>
      </div>
    </div>

    <div class="timestamp" id="timestamp">最后更新: --:--:--</div>
  </div>
</template>

<style scoped>
.dashboard {
  width: 21%;
  height: 27%;
  background: rgba(10, 20, 40, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
  border: 1px solid rgba(0, 247, 255, 0.2);
  position: absolute;
  overflow: hidden;
  backdrop-filter: blur(5px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 15px;
}

.dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent;
  border-image: linear-gradient(
      to right,
      rgba(0, 247, 255, 0),
      rgba(0, 247, 255, 0.8),
      rgba(0, 247, 255, 0)
  ) 1 1;
  pointer-events: none;
}

/* 面板标题 */
.panel-title {
  font-size: 22px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00f7ff;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
  position: relative;
  z-index: 1;
}


.dashboard::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
  linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

/* 四角装饰 */
.corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-color: #00f7ff;
  pointer-events: none;
}

.corner-tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.corner-tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}


.title {
  text-align: center;
  font-size: 18px;
  text-shadow: 0 0 10px #00f7ff;
  letter-spacing: 2px;
}

.sensors-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.sensor {
  background-color: rgba(0, 20, 40, 0.7);
  border: 1px solid #00a2ff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 162, 255, 0.3);
  transition: all 0.3s ease;
}

.sensor:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(0, 247, 255, 0.5);
}

.sensor-name {
  font-size: 18px;
  margin-bottom: 10px;
  color: #00f7ff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sensor-value {
  font-size: 26px;
  font-weight: bold;
  margin: 15px 0;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  transition: all 0.5s ease;
}

.value-update {
  animation: valueUpdate 0.5s;
}

.sensor-unit {
  font-size: 16px;
  color: #00a2ff;
}

.status-indicator {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: all 0.5s ease;
}

.normal {
  background-color: #00ff00;
  box-shadow: 0 0 10px #00ff00;
}

.warning {
  background-color: #ffff00;
  box-shadow: 0 0 10px #ffff00;
}

.critical {
  background-color: #ff0000;
  box-shadow: 0 0 10px #ff0000;
  animation: pulse 1s infinite;
}

.status-panel {
  grid-column: span 3;
  background-color: rgba(0, 20, 40, 0.7);
  border: 1px solid #00a2ff;
  border-radius: 8px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.status-title {
  font-size: 18px;
  color: #00f7ff;
  text-transform: uppercase;
}

.status-value {
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  transition: all 0.5s ease;
}

.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      rgba(0, 247, 255, 0.05) 1px,
      transparent 1px
  );
  background-size: 100% 2px;
  pointer-events: none;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes valueUpdate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.timestamp {
  position: absolute;
  bottom: 10px;
  right: 260px;
  font-size: 20px;
  color: rgba(0, 247, 255, 0.7);
}
</style>
